{% extends 'course/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Assignment
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-university"></i>  <a href="/courses">Courses</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li class="active">
                        <i class="fa fa-child"></i> <a href="/course/{{ course.id }}/peer_review">Peer-Review</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-book"></i> Assignment #{{ assignment.assignment_num }}
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Question(s) -->
        <div id="ajax_questions_table"
           name="ajax_questions_table">
            {% include "course/peer_review/assignments_table.html" %}
        </div>
        <!-- /.Questions -->

<script>
    /**
     *  Function will call AJAX function to load the video player modal for the lecture.
     */
    function ajax_peer_review_modal(question_id, question_type, submission_id)
    {
        var url = {{ a_submission.submission_id }} + '/peer_review_modal';
    
        $.ajax( url, {
               data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'question_id': question_id,
                    'question_type': question_type,
                    'submission_id': submission_id
               },
               type: 'post',
               success: function(result) {
                    // success code execution here
                    $('#ajax_peer_review').html(result); // Update UI.
                    $('#peer_review_modal').modal();               // Unhide view.
               },
               error: function(xhr,status,error) {
                    // error code here
               },
               complete: function(xhr,status) {
                    // completion code here
               }
        });
    }

    function ajax_save_peer_review(question_id, question_type)
    {
        var url = {{ a_submission.submission_id }} + '/save_peer_review';
        var marks = $('#id_marks').val();
        var text = $('#id_text').val();
        
        $.ajax( url, {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'question_id': question_id,
               'question_type': question_type,
               'marks': marks,
               'text': text,
            },
            type: 'post',
            success: function(result) {
               if (result.status == 'success')
               {
                    $('#peer_review_modal').modal('hide');
                    ajax_update_assignment_marks();
               }
               else
               {
                    print_error(result.message);
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_delete_peer_review(review_id)
    {
        var url = {{ a_submission.submission_id }} + '/delete_peer_review';
        var marks = $('#id_marks').val();
        var text = $('#id_text').val();
    
        $.ajax( url, {
           data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'review_id': review_id,
           },
           type: 'post',
           success: function(result) {
               if (result.status == 'success')
               {
                    ajax_update_assignment_marks();
               }
               else
               {
                    alert(result.message);
               }
           },
           error: function(xhr,status,error) {
                // error code here
           },
           complete: function(xhr,status) {
                // completion code here
           }
        });
    }

    function ajax_update_assignment_marks()
    {
        var url = {{ a_submission.submission_id }} + '/update_assignment_marks';
    
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
                success: function(result){
                if (result.status != 'success') // Print errors.
                {
                    alert(result.message);
                }
                else
                {
                    window.location = ''; // Reload the view.
                }
            }
        });
    }

/**
 * Prints a error box with the contents of the errors received from the server.
 */
function print_error(json_result)
{
    $('#error_box').prop("hidden", false); // Display error box.
    
    // Iterate through the JSON array of arrays and generate an error string.
    var message = "<b>Error(s):</b><hr/>";
    var data = $.parseJSON(json_result)
    for (var key in data) {
        if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
            message += "<p>" + key + ": " + data[key] + "<p>";
        }
    }
    
    // Replace the error string with the contents of the error box.
    $('#error_box').html(message);
}

</script>

<!-- Modal -->
<div id="ajax_peer_review"
   name="ajax_peer_review"></div>
<!-- /.Modal -->
{% endblock content %}
